﻿@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<h1>ASP gRPC Samples</h1>
<label>Enter Name:</label>
<input type="text" id="TheName" value="Nick">
<h2>Non-Streaming (Single Value) gRPC Sample:</h2>
<button type="button" id="GetSingleGreetingButton">Get Single Greeting</button>
<br />
<br />
<div id="TheSingleValueResponse" style="font-weight:bold;font-size:20px;font-style:italic"></div>

<h2>Server Streaming gRPC Sample (multiple greetings from the Server):</h2>
<button type="button" id="GetMultipleGreetingsButton">Get Multiple Greeting</button>
<button type="button" id="GetMultipleGreetingsWithErrorButton">Get Multiple Greeting with ERROR</button>
<button type="button" id="CancelStreamingButton">Cancel Streaming</button>
<br />
<br />
<div id="TheStreamingResponse" style="font-weight:bold;font-size:20px;font-style:italic"></div>
<label id="TheErrorLabel" style="visibility:collapse">Streaming Error:</label>
<div id="TheStreamingError"></div>
<div id="TheStreamingEnded"></div>

<script src="./dist/main.js"></script>
<script src="./dist/jquery.min.js"></script>

<script type="text/javascript">
    var stream = null;
    $(
        () => {
            // get url of the current ASP website
            var location = window.location;
            var url = location.origin;

            // use this url to create the client. 
            var greeterServiceClient = new GreeterClient(url);

            // assing an action to be fired on "#GetSingleGreetingButton" button click
            $("#GetSingleGreetingButton").on(
                "click",
                () => {

                    // create request object
                    var request = new HelloRequest();

                    // Read the name from TheName TextBox
                    var name = $("#TheName").val();

                    // set the name parameter of the request object
                    request.setName(name);

                    // send hello request and set up a callback to be fired 
                    // once the response is obtained.
                    greeterServiceClient.sayHello(request, {}, (err, response) => {
                        // this is the body of sayHello service callback 
                        // fired on response coming from gRPC server

                        // get the message from the response, assign 
                        // it as text to "#TheSingleValueResponse" div area
                        var msg = response.getMsg();
                        $("#TheSingleValueResponse").text(msg);
                    });
                });

            // No error coming from the server
            $("#GetMultipleGreetingsButton").on(
                "click",
                () => getStreamedGreetings(greeterServiceClient, false)
            );

            // Server error after 11th iteration
            $("#GetMultipleGreetingsWithErrorButton").on(
                "click",
                () => getStreamedGreetings(greeterServiceClient, true)
            );

            $("#CancelStreamingButton").on(
                "click",
                () => {
                    var myStream = stream;

                    if (myStream != null) {
                        myStream.cancel("Cancelling Streaming from client");
                    }
                }
            )
        }
    )

    getStreamedGreetings = (greeterServiceClient, throwError) => {

        // reset current STREAMING ENDED message text to empty
        $("#TheStreamingEnded").text('');
        
        // make the current error label invisible
        $("#TheErrorLabel").css("visility", "collapse");

        // reset the streaming error message to emtpy
        $("#TheStreamingError").text('');

        // create a HelloRequest object
        var request = new HelloRequest();

        // get the game from TheName TextBox
        var name = $("#TheName").val();

        // set the Name parameter of the request
        request.setName(name);

        // calling the streaming server methods returns the client handle to 
        // the stream (which we assign to stream global variable)
        if (!throwError) {
            // call the service that does not throw an Exception
            stream = greeterServiceClient.serverStreamHelloReplies(request, {});
        }
        else {
            // call the service that does throws RpcException after 11th iteration
            stream = greeterServiceClient.serverStreamHelloRepliesWithError(request, {});
        }

        // On stream message arriving, assign the text received contained with that last message
        // to the the corresponding text area (div) element
        stream.on('data', (response) => {
            var msg = response.getMsg();
            $("#TheStreamingResponse").text(msg);
        });

        // do something on server status changing
        stream.on('status', (status) => {

        });

        // assing error text on server error
        stream.on('error', (err) => {
            $("#TheErrorLabel").css("visility", "visible");
            $("#TheStreamingError").text(err);
            stream = null;
        });

        // signify that the server streaming ended
        stream.on('end', () => {
            $("#TheStreamingEnded").text("STREAMING ENDED");
            stream = null;
        })
    }
</script>